<template>
    <!-- 购物车弹窗 -->
    <z-popup 
        position="bottom"
        z-index="80"
        :overlay-style="{background: 'transparent'}"
        :style="cartStyle"
        @close="onClose"
    >
        <div class="cm-cart-clear" @click="cartStore.ClearCart">
            <img class="cm-cart-clear__icon" :src="v_cart_clear" alt="SVG Icon" />
            <div class="cm-cart-clear__text">清空购物车</div>
        </div>
        <div class="popup-shopping-cart">
            <div class="cm-cart-cell" v-for="v,k in cartStore.cartList">
                <!-- <div class="cm-cart-cell__cover" :style="{ backgroundImage: `url(${v.attachment})` }" ></div> -->
                <ZImage class="cm-cart-cell__cover" :src="v.attachment" :size="60"/>
                <div class="cm-cart-cell__main">
                    <div class="cm-cart-cell__title">
                        <span class="cm-cart-cell__desc">{{v.goodsName}}</span>
                    </div>
                    <div class="cm-cart-cell__detail">{{v.flavor}}</div>
                    <div class="cm-cart-cell__footer">
                        <div class="cm-cart-cell__money">￥{{formatNumber(v.salePrice)}}</div>
                        <z-stepper 
                            :disabletype="2"
                            :min="0" 
                            :step="v.saleLimitStep"
                            :max="v.saleLimitMax"
                            v-model="v.num" 
                            @plus="onHandleOrder('plus', v)"
                            @minus="onHandleOrder('minus', v)"
                            @change="onChange(v)"
                           />
                    </div>
                </div>
            </div>
        </div>
    </z-popup>
</template>
<script setup>
import useCartStore from '@/store/cart'
import useConfigStore from '@/store/config'
import { formatNumber } from '@/lib/util.js'
import v_cart_clear from '@/assets/svg/common/v_cart_clear.svg'
import ls from '@/lib/ls'

const cartStyle = 'background: #45454C;border-radius:24px 24px 0px 0px;bottom:50px;overflow:hidden;'
const cartStore = useCartStore()
const configStore = useConfigStore()

const emits = defineEmits(['close']);
const onClose = ()=>{
    emits('close')
}

const onHandleOrder = (type, item)=>{
    const product = {
        ...item,
        mathType: type
    }
    cartStore.RefreshCart(product, 'cart')
}

const onChange = (item)=>{
     console.log(item,'onChange')
    // cartStore.UpdateNumFromProductList(item)
     const updatedCartList = cartStore.cartList.map(v => {
        if (v.goodsCode === item.goodsCode) {
            return {
                ...v,
                num: item.num
            };
        }
        return v; 
    });

    cartStore.cartList = updatedCartList;

    ls.set('CART_LIST', cartStore.cartList)
    console.log(cartStore.cartList,'cartList')
   
}

</script>
<style scoped lang="scss">

.popup-shopping-cart {
    margin: 16px;
    position: relative;
    overflow: auto;
    max-height: 405px;

    .cm-cart-cell:first-child {
        padding-top: 0;
    }

    .cm-cart-cell__desc {
        margin-left: 0;
    }
}
::v-deep(.van-stepper__minus:before){
    background: #212121 !important;
}
::v-deep(.van-stepper__minus:after){
    background: #212121 !important;
}
::v-deep(.van-stepper__minus){
    background: #FFAA00 !important;
}
::v-deep(.van-stepper__plus:before){
    background: #212121 !important;
}
::v-deep(.van-stepper__plus:after){
    background: #212121 !important;
}
::v-deep(.van-stepper__plus){
    background: #FFAA00 !important;
}
</style>